<script setup lang="ts">
import { ref } from 'vue'
import { Channel, ApiRes } from '../types/data'
import axios from 'axios'
import { useToutiaoStore } from '../stores/toutiao'
const store = useToutiaoStore()

// 定义模型数据
const channels = ref([] as Channel[])

const getData = async () => {
  /**
   * axios.get<类型> 这个类型就是我们响应体(res.data)后面的类型
   */
  // const res = await axios.get<{
  //   message: string
  //   data: { channels: Channel[] }
  // }>('http://geek.itheima.net/v1_0/channels')
  const res = await axios.get<ApiRes<{ channels: Channel[] }>>(
    'http://geek.itheima.net/v1_0/channels'
  )
  // console.log(res)
  channels.value = res.data.data.channels
}
getData()
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === store.channelId }"
        href="javascript:;"
        v-for="(item, i) in channels"
        :key="item.id"
        @click="store.changeChannelId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
